<template>
  <view class="">
    <view class="radius20" style="">
      <view class="font30 col-333 bg-white" style="font-size: 32rpx; font-weight: bold; height: 140rpx; line-height: 140rpx; padding-left: 34rpx">
        提问人：{{ info.patient_name }}（{{ info.patient_gender_text }} · {{ info.patient_age }}岁）
      </view>
      <view class="bg-white" style="margin: 20rpx 28rpx; padding-bottom: 27rpx; border-radius: 20rpx">
        <view class="col-333" style="font-size: 32rpx; font-weight: bold; padding: 31rpx">问题详情</view>
        <view class="margin-top-sm col-666 letter flex align-center" style="background-color: #f8f8f8; padding: 26rpx 27rpx; border-radius: 14rpx; margin: 29rpx 31rpx">
          <textarea
            name=""
            v-model="content"
            class="flex-sub"
            placeholder="例：医生您好，我感冒咳嗽一周，体温正常，请问是否需要去医院就诊？"
            placeholder-class="placestype"
            id=""
            cols="30"
            rows="10"
          ></textarea>
        </view>
      </view>
      <view class="" style="margin: 0 28rpx; background: #fff; border-radius: 20rpx">
        <view class="col-333" style="font-size: 32rpx; font-weight: bold; padding: 31rpx">上传患部照片 (选填)</view>
        <view class="margin-top-sm" style="padding-left: 35rpx; padding-right: 35rpx">
          <view class="grid col-3 grid-square flex-sub">
            <view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
              <image :src="imgList[index]" mode="aspectFill"></image>
              <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view class="solids" @tap="ChooseImage" v-if="imgList.length < 4">
              <text class="cuIcon-cameraadd"></text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="foot-box" style="padding-bottom: 58rpx">
      <view class="text-center padding-bottom font26" style="color: #0087fe">剩余{{ info.give_number }}次赠送提问机会</view>
      <view class="flex align-center justify-center">
        <view @click="submit" class="btnbg font30" style="width: 500rpx; height: 80rpx">发送给医生</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: '',
      img: this.util.api.img,
      content: '',
      imgList: []
    };
  },
  onLoad(op) {
    op.info ? (this.info = JSON.parse(op.info)) : '';
    console.log(this.info);
  },
  methods: {
    ChooseImage() {
      uni.chooseImage({
        count: 3 - this.imgList.length, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          if (this.imgList.length != 0) {
            this.imgList = this.imgList.concat(res.tempFilePaths);
          } else {
            this.imgList = res.tempFilePaths;
          }
        }
      });
    },
    ViewImage(e) {
      uni.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url
      });
    },
    DelImg(e) {
      this.imgList.splice(e.currentTarget.dataset.index, 1);
    },
    submit() {
      if (!this.content) {
        this.util.showToast('请填写问题详情');
        return false;
      }
      let data = [];
      if (this.imgList.length != 0) {
        for (let i = 0; i < this.imgList.length; i++) {
          this.util.upload(this.imgList[i]).then((res) => {
            data.push(res.url);
            if (data.length == this.imgList.length) {
              this.tjsubmit(data);
            }
          });
        }
      } else {
        this.tjsubmit([]);
      }
    },
    tjsubmit(e) {
      this.util
        .request(
          'order/userQuiz',
          {
            order_id: this.info.order_id,
            images: e,
            content: this.content
          },
          'post'
        )
        .then((res) => {
          this.util.showToast('提问成功', true);
        });
    }
  }
};
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
